<template>
  <div class="order-list">
    <div v-if="orders.length === 0" class="empty-orders">
      <van-empty description="暂无订单" />
    </div>
    
    <div v-else class="orders">
      <div 
        v-for="order in orders" 
        :key="order.id" 
        class="order-item"
        @click="goToOrderDetail(order.id)"
      >
        <!-- 订单头部 -->
        <div class="order-header">
          <div class="order-info">
            <span class="order-no">订单号：{{ order.orderNo }}</span>
            <span class="order-time">{{ order.createTime }}</span>
          </div>
          <van-tag :type="getStatusType(order.status)">
            {{ order.statusText }}
          </van-tag>
        </div>
        
        <!-- 商品列表 -->
        <div class="order-goods">
          <div 
            v-for="item in order.items" 
            :key="item.id" 
            class="goods-item"
          >
            <img :src="item.img" :alt="item.title" class="goods-image" />
            <div class="goods-info">
              <div class="goods-title">{{ item.title }}</div>
              <div class="goods-specs" v-if="item.specs">
                {{ formatSpecs(item.specs) }}
              </div>
              <div class="goods-price">
                <span class="price">¥{{ item.price }}</span>
                <span class="count">x{{ item.count }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 订单底部 -->
        <div class="order-footer">
          <div class="order-total">
            共{{ getTotalCount(order.items) }}件商品 合计：
            <span class="total-price">¥{{ order.totalPrice.toFixed(2) }}</span>
          </div>
          <div class="order-actions">
            <van-button 
              v-if="order.status === 'pending'"
              type="danger" 
              size="small"
              @click.stop="payOrder(order)"
            >
              立即付款
            </van-button>
            <van-button 
              v-if="order.status === 'delivered'"
              type="primary" 
              size="small"
              @click.stop="confirmReceive(order)"
            >
              确认收货
            </van-button>
            <van-button 
              v-if="order.status === 'completed'"
              type="default" 
              size="small"
              @click.stop="buyAgain(order)"
            >
              再次购买
            </van-button>
            <van-button 
              v-if="order.status === 'pending'"
              type="default" 
              size="small"
              @click.stop="cancelOrder(order)"
            >
              取消订单
            </van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'

const router = useRouter()

// 定义 props
const props = defineProps({
  orders: {
    type: Array,
    default: () => []
  }
})

// 获取状态类型
const getStatusType = (status) => {
  const typeMap = {
    pending: 'warning',
    paid: 'primary',
    delivered: 'success',
    completed: 'default'
  }
  return typeMap[status] || 'default'
}

// 格式化规格
const formatSpecs = (specs) => {
  if (!specs || typeof specs !== 'object') return ''
  return Object.values(specs).join('、')
}

// 获取商品总数
const getTotalCount = (items) => {
  return items.reduce((total, item) => total + item.count, 0)
}

// 跳转到订单详情
const goToOrderDetail = (orderId) => {
  router.push(`/order-detail/${orderId}`)
}

// 支付订单
const payOrder = async (order) => {
  try {
    await showConfirmDialog({
      title: '确认支付',
      message: `确认支付 ¥${order.totalPrice.toFixed(2)} 吗？`
    })
    
    // 这里应该调用支付 API
    showToast('支付功能开发中')
  } catch {
    // 用户取消
  }
}

// 确认收货
const confirmReceive = async (order) => {
  try {
    await showConfirmDialog({
      title: '确认收货',
      message: '确认已收到商品吗？'
    })
    
    // 这里应该调用确认收货 API
    showToast('确认收货成功')
  } catch {
    // 用户取消
  }
}

// 再次购买
const buyAgain = (order) => {
  // 将商品重新加入购物车
  order.items.forEach(item => {
    // 这里应该调用加入购物车 API
  })
  
  showToast('已加入购物车')
  router.push('/cart')
}

// 取消订单
const cancelOrder = async (order) => {
  try {
    await showConfirmDialog({
      title: '取消订单',
      message: '确认取消该订单吗？'
    })
    
    // 这里应该调用取消订单 API
    showToast('订单已取消')
  } catch {
    // 用户取消
  }
}
</script>

<style lang="scss" scoped>
.order-list {
  padding: 10px;
}

.empty-orders {
  padding: 40px 0;
}

.order-item {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  
  .order-info {
    display: flex;
    flex-direction: column;
    
    .order-no {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
    }
    
    .order-time {
      font-size: 12px;
      color: #999;
    }
  }
}

.order-goods {
  padding: 15px;
  
  .goods-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .goods-image {
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
      margin-right: 15px;
    }
    
    .goods-info {
      flex: 1;
      
      .goods-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
        line-height: 1.4;
      }
      
      .goods-specs {
        font-size: 12px;
        color: #999;
        margin-bottom: 5px;
      }
      
      .goods-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .price {
          font-size: 14px;
          font-weight: bold;
          color: #ff6b6b;
        }
        
        .count {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-top: 1px solid #f0f0f0;
  
  .order-total {
    font-size: 14px;
    color: #333;
    
    .total-price {
      font-weight: bold;
      color: #ff6b6b;
    }
  }
  
  .order-actions {
    display: flex;
    gap: 10px;
  }
}
</style> 